<template>
  <div class="home">
    <!-- 映射二级路由内容 -->
    <router-view />
    <div style="height: 60px"></div>

    <!-- 底部选项卡 -->
    <van-tabbar
      v-model="active"
      active-color="#67bce7"
      inactive-color="#858585"
    >
      <van-tabbar-item to="/home/index">
        <span>首页</span>
        <template #icon="props">
          <img slot="icon" :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/home/news"
        ><span>发现</span>
        <template #icon="props">
          <img
            slot="icon"
            :src="props.active ? icon.active1 : icon.inactive1"
          /> </template
      ></van-tabbar-item>
      <van-tabbar-item
        ><span  @click='$router.push("/home/zhaodianzhuang")'>找桩·充电</span>
        <template #icon="props">
          <img
            slot="icon"
            :src="props.active ? icon.active2 : icon.inactive2"
          /> </template
      ></van-tabbar-item>
      <van-tabbar-item
        ><span   @click='$router.push("/home/shequ")'>社区</span>
        <template #icon="props">
          <img
            slot="icon"
            :src="props.active ? icon.active3 : icon.inactive3"
          /> </template
      ></van-tabbar-item>
      <van-tabbar-item
        ><span  @click='$router.push("/home/mine")'>我的</span>
        <template #icon="props">
          <img
            slot="icon"
            :src="props.active ? icon.active4 : icon.inactive4"
          /> </template
      ></van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      icon: {
        active: require("../assets/tb_img/home_1.png"),
        inactive: require("../assets/tb_img/home_0.png"),
        active1: require("../assets/tb_img/find_1.png"),
        inactive1: require("../assets/tb_img/find_0.png"),
        active2: require("../assets/tb_img/electricity_1.png"),
        inactive2: require("../assets/tb_img/electricity_0.png"),
        active3: require("../assets/tb_img/community_1.png"),
        inactive3: require("../assets/tb_img/community_0.png"),
        active4: require("../assets/tb_img/me_1.png"),
        inactive4: require("../assets/tb_img/me_0.png"),
      },
    };
  },
  mounted() {},
  watch: {
    //监听
    active(to, from) {
      //active变化时自动执行
      console.log("点击了底部选项卡: " + to);
      if (to == "index") {
        this.$router.push("/home/index");
      } else if (to == "find") {
        this.$router.push("/home/find");
      }
    },
  },
};
</script>
<style scoped>
</style>